<template>
  <!-- vue3页面 -->
    组件一：
    <div class="wrap">

        <el-button @click="one" type='danger'>发送12345给组件2</el-button>
        <h2>接收组件二传来的值：<span style='color:#9c3939'>{{data2}}</span></h2>

    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted,onDeactivated, reactive ,ref, Ref,onActivated,inject} from 'vue'
import emitter from '@/utils/bus'
export default defineComponent({
  name: 'App',
  setup() {
    const data1 = ref(111)
    const data2 = ref()
    
    const one = ()=>{
        data1.value = 12345678
        emitter.emit('data1',data1.value)
    }

    emitter.on('data2',(res)=>{
        data2.value = res
    })
    // onMounted(()=>{
    //     // emitter.emit('data1',data1.value)
    // })
    
    onActivated(()=>{
        // emitter.emit('data1',data1.value)
    })
    onDeactivated(() => {
    })
    return {
        one,
        data1,
        data2
    }
  }
})
</script>

<style scoped>
.wrap{
    border: solid;
    margin: 30px;
    height: 200px;
}
</style>